<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.引入 ECharts 文件 -->
    <script src="./echarts/echarts.min.js"></script>
    <!-- 中国地图 -->
    <script src="./echarts/china.js"></script>
</head>

<body>
    <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">

        // 3.1 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('#main'));

        // 3.2 指定图表的配置项和数据
        const dataList = [
            {
                "name": "上海",
                "value": 3
            },
            {
                "name": "陕西省",
                "value": 3
            },
            {
                "name": "江苏省",
                "value": 2
            },
            {
                "name": "内蒙古自治区",
                "value": 3
            },
            {
                "name": "北京",
                "value": 11
            },
            {
                "name": "贵州省",
                "value": 4
            },
            {
                "name": "西藏自治区",
                "value": 3
            },
            {
                "name": "广东省",
                "value": 4
            },
            {
                "name": "天津",
                "value": 3
            },
            {
                "name": "黑龙江省",
                "value": 1
            },
            {
                "name": "云南省",
                "value": 3
            },
            {
                "name": "福建省",
                "value": 3
            },
            {
                "name": "四川省",
                "value": 2
            },
            {
                "name": "新疆维吾尔自治区",
                "value": 3
            },
            {
                "name": "甘肃省",
                "value": 3
            },
            {
                "name": "辽宁省",
                "value": 5
            },
            {
                "name": "安徽省",
                "value": 3
            },
            {
                "name": "吉林省",
                "value": 2
            },
            {
                "name": "浙江省",
                "value": 1
            },
            {
                "name": "山西省",
                "value": 2
            },
            {
                "name": "青海省",
                "value": 1
            },
            {
                "name": "广西壮族自治区",
                "value": 3
            },
            {
                "name": "宁夏回族自治区",
                "value": 2
            },
            {
                "name": "湖北省",
                "value": 4
            },
            {
                "name": "河北省",
                "value": 1
            },
            {
                "name": "湖南省",
                "value": 3
            },
            {
                "name": "江西省",
                "value": 1
            },
            {
                "name": "河南省",
                "value": 1
            }
        ]

        // 数据设置
        dataList.forEach((item) => {
            // 数据里名字和上面的名字有点不太一样, 需要把多余的文字去掉(替换成空字符串)
            item.name = item.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g, '') 
        })

        let option = {
            title: {
                text: '籍贯分布',
                top: 10,
                left: 10,
                textStyle: {
                    fontSize: 16,
                },
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}: {c} 位学员',
                borderColor: 'transparent',
                backgroundColor: 'rgba(0,0,0,0.5)',
                textStyle: {
                    color: '#fff',
                },
            },
            visualMap: {
                min: 0,
                max: 6,
                left: 'left',
                bottom: '20',
                text: ['6', '0'],
                inRange: {
                    color: ['#ffffff', '#0075F0'],
                },
                show: true,
                left: 40,
            },
            geo: { // 地理坐标系组件
                map: 'china',
                roam: false,
                zoom: 1.0,
                label: {
                    normal: {
                        show: true,
                        fontSize: '10',
                        color: 'rgba(0,0,0,0.7)',
                    },
                },
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(0, 0, 0, 0.2)',
                        color: '#e0ffff',
                    },
                    emphasis: {
                        areaColor: '#34D39A',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 20,
                        borderWidth: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)',
                    },
                },
            },
            series: [
                {
                    name: '籍贯分布',
                    type: 'map',
                    geoIndex: 0,
                    data: dataList,
                },
            ],
        }

        // 3.3使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>

</html>